<template>
    <div class="box">
        <el-tabs class="boxitem" v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="用户支付转化表" name="first">
                <div class="itemlistino">
                    <div class="gaugeoutfit">
                        <div class="selectist">
                            <span>请选择机构名称：</span>
                            <treeselect class="treeselectitem" v-model="value" :options="options" :normalizer="normalizer"
                                placeholder="请选择机构名称" />
                        </div>

                        <div class="choosetime">
                            <div class="block">
                                <span class="demonstration">请选择查询时间：</span>
                                <el-date-picker v-model="value2" type="daterange" @change="changtimefour"
                                    :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" align="right">
                                </el-date-picker>
                            </div>
                            <div class="search"> <el-button @click="search" :disabled="isDisabled" type="primary"
                                    icon="el-icon-search">搜索</el-button>
                                <el-button type="warning" icon="el-icon-download"
                                    @click="goExcelPayTransformResult">导出</el-button>
                                <el-button icon="el-icon-refresh" @click="resetPayTransformResult">
                                    重置
                                </el-button>
                            </div>

                        </div>
                    </div>
                    <el-table border :data="tableO">
                        <el-table-column label="机构名称" align="center" prop="orgName"></el-table-column>
                        <el-table-column label="进入详情页用户量" align="center" prop="detailPageUserNumber"></el-table-column>
                        <el-table-column label="进入注册页用户量" align="center" prop="registerPageUserNumber"></el-table-column>
                        <el-table-column label="进入支付页用户量" align="center" prop="payPageUserNumber"></el-table-column>
                        <el-table-column label="完成支付用户量" align="center" prop="paySuccessPageUserNumber"></el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="用户支付习惯统计表" name="second">
                <div class="itemlistino">
                    <div class="gaugeoutfit">
                        <div class="selectist">
                            <span>请选择机构名称：</span>
                            <treeselect class="treeselectitem" v-model="value" :options="options" placeholder="请选择机构名称" />
                        </div>
                        <div class="choosetime">
                            <div class="block">
                                <span class="demonstration">请选择查询时间：</span>
                                <el-date-picker v-model="value2" type="daterange" @change="changtimefour"
                                    :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" align="right">
                                </el-date-picker>
                            </div>
                            <div class="search"> <el-button @click="search" :disabled="isDisabled" type="primary"
                                    icon="el-icon-search">搜索</el-button>
                                <el-button type="warning" icon="el-icon-download" @click="goExcelPayInfo">导出</el-button>
                                <el-button icon="el-icon-refresh" @click="resetPayInfo">
                                    重置
                                </el-button>
                            </div>

                        </div>

                    </div>
                    <el-table border :data="tableT">
                        <el-table-column label="机构名称" align="center" prop="orgName"></el-table-column>
                        <el-table-column label="合计支付订单量" align="center" prop="payOrderNumberTotal"></el-table-column>
                        <el-table-column label="微信支付订单量" align="center"
                            prop="payOrderNumberTotalWechatPay"></el-table-column>
                        <el-table-column label="支付宝支付订单量" align="center" prop="payOrderNumberTotalAlipay"></el-table-column>
                        <el-table-column label="合计支付金额" align="center" prop="payOrderAmountTotal"></el-table-column>
                        <el-table-column label="微信支付金额" align="center"
                            prop="payOrderAmountTotalWechatPay"></el-table-column>
                        <el-table-column label="支付宝支付金额" align="center" prop="payOrderAmountTotalAlipay"></el-table-column>
                    </el-table>

                </div>

            </el-tab-pane>
            <el-tab-pane label="完结用户留存统计表" name="third">
                <div class="itemlistino">
                    <div class="gaugeoutfit">
                        <div class="selectist">
                            <span>请选择机构名称：</span>
                            <treeselect class="treeselectitem" v-model="value" :options="options" placeholder="请选择机构名称" />
                        </div>
                        <div class="choosetime">
                            <div class="block">
                                <span class="demonstration">请选择查询时间：</span>
                                <el-date-picker v-model="value2" type="daterange" @change="changtimefour"
                                    :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" align="right">
                                </el-date-picker>
                            </div>
                            <div class="search"> <el-button @click="search" :disabled="isDisabled" type="primary"
                                    icon="el-icon-search">搜索</el-button>
                                <el-button type="warning" icon="el-icon-download" @click="goExcelTrainInfo">导出</el-button>
                                <el-button icon="el-icon-refresh" @click="resetRemainInfo">
                                    重置
                                </el-button>
                            </div>

                        </div>

                    </div>

                    <el-table border :data="tableTr">
                        <el-table-column label="机构名称" prop="orgName"></el-table-column>
                        <el-table-column label="合计已完结用户量" prop="remainCompletedUserTotal"></el-table-column>
                        <el-table-column label="完成1-7次用户量" prop="remainCompletedUser17"></el-table-column>
                        <el-table-column label="完成8-14次用户量" prop="remainCompletedUser814"></el-table-column>
                        <el-table-column label="完成15-21次用户量" prop="remainCompletedUser1521"></el-table-column>
                        <el-table-column label="完成22-28次用户量" prop="remainCompletedUser2228"></el-table-column>
                        <el-table-column label="用户平均完成次数" prop="remainCompletedUserAverage"></el-table-column>
                    </el-table>

                </div>
            </el-tab-pane>
            <el-tab-pane label="用户量留存统计" name="fourth">
                <div class="itemlistino2">

                    <div class="gaugeoutfit">
                        <!-- <div class="selectist">
                            <span>请选择机构名称：</span>
                            <treeselect class="treeselectitem" v-model="value" :options="options" placeholder="请选择机构名称" />
                        </div> -->
                        <div class="choosetime1">
                            <div class="stytiem">
                                <div class="timesty">
                                    <div>
                                        <span>起始时间：</span>
                                        <el-date-picker v-model="formResult.beginTaskDate" type="date" placeholder="选择日期"
                                            :picker-options="pickerOptions5" @focus="resetTaskDate">
                                        </el-date-picker>
                                    </div>
                                    <div>
                                        <span>结束时间：</span>
                                        <el-date-picker v-model="formResult.endTaskDate" type="date"
                                            :picker-options="pickerOptions3" placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </div>
                                <div class="search"> <el-button @click="search" :disabled="isDisabled1" type="primary"
                                        icon="el-icon-search">搜索</el-button>
                                    <el-button type="warning" icon="el-icon-download"
                                        @click="goExcelRemainInfo">导出</el-button>
                                    <!-- <el-popover placement="top" width="160" v-model="visible">
                                        <p>确定要导出吗？</p>
                                        <div style="text-align: right; margin: 0">
                                            <el-button size="mini" type="text" >取消</el-button>
                                            <el-button type="primary" size="mini" >确定</el-button>
                                        </div>
                                      
                                    </el-popover> -->


                                    <el-button icon="el-icon-refresh" @click="resetTrainInfo">
                                        重置
                                    </el-button>

                                </div>
                            </div>
                            <div>

                                <div class="spanitem">
                                    <div>进入详情页用户量: <span>{{ detailPageUserNumber }}</span></div>
                                    <div>进入支付页用户量:<span>{{ payPageUserNumber }}</span></div>
                                    <div>进入注册页用户量:<span>{{ registerPageUserNumber }}</span></div>
                                    <div>完成支付用户量: <span>{{ paySuccessPageUserNumber }}</span></div>
                                </div>
                            </div>
                        </div>



                    </div>

                    <el-table border :data="rowData">
                        <el-table-column v-for="(item, index) in columnData " :key="index" :prop="item.name"
                            :label="item.label" align="center" min-width="120px"></el-table-column>
                    </el-table>

                </div>

            </el-tab-pane>
            <el-tab-pane label="页面各细节埋点" name="five">
                <div class="itemlistino1" style="overflow-y: scroll;">

                    <div class="gaugeoutfit">
                        <div class="selectist">
                            <span>请选择机构名称：</span>
                            <treeselect class="treeselectitem" v-model="value" :options="options" placeholder="请选择机构名称" />
                        </div>
                        <div class="choosetime">
                            <div class="block">
                                <span class="demonstration">请选择查询时间：</span>
                                <el-date-picker v-model="value2" type="daterange" @change="changtimefour"
                                    :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" align="right">
                                </el-date-picker>
                            </div>
                            <div class="search"> <el-button @click="search" :disabled="isDisabled" type="primary"
                                    icon="el-icon-search">搜索</el-button>
                                <el-button @click="goExcel" type="warning" icon="el-icon-download">导出</el-button>
                                <el-button icon="el-icon-refresh" @click="resetSysBuriedPointList">重置</el-button>
                            </div>

                        </div>

                    </div>

                    <el-table border :data="tableFr">
                        <el-table-column label="埋点记录表主键" fixed align="center" prop="id"></el-table-column>
                        <el-table-column label="会员名称" align="center" prop="customerName"></el-table-column>
                        <el-table-column label="机构名称" align="center" prop="orgName"></el-table-column>
                        <el-table-column label="IP地址" align="center" prop="ip"></el-table-column>
                        <el-table-column label="版块" align="center" prop="sectionName"></el-table-column>
                        <!-- <el-table-column label="模块" align="center" prop="module"></el-table-column> -->
                        <el-table-column label="模块名称" align="center" prop="moduleName"></el-table-column>
                        <!-- <el-table-column label="功能" align="center" prop="function"></el-table-column> -->
                        <el-table-column label="功能名称" align="center" prop="functionName"></el-table-column>
                        <el-table-column label="点击后跳转页面" align="center" prop="redirectPage"></el-table-column>
                        <el-table-column label="埋点名称" align="center" prop="buriedPointName"></el-table-column>
                        <el-table-column label="创建时间" align="center" prop="strCreateTime"></el-table-column>
                    </el-table>
                    <div class="blockpagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                            :current-page="currentPage" :page-sizes="[20, 40, 60, 80, 100]"
                            layout=" prev, pager, next,->,sizes,total" :total="total">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="用户在线时长">
                <div>
                    <el-form :model="formlist" style="padding: 0 20px;">
                        <el-form-item label="筛选条件" style="text-align:left;">
                            <div style="display: flex;">
                                <el-input style="width: 260px; margin-right: 10px;" v-model="formlist.phone"
                                    placeholder="根据用户手机号进行搜索" suffix-icon="el-icon-search"></el-input>

                                <div style="margin-right: 10px;">
                                    <span>性别：</span>
                                    <el-select v-model="formlist.sex" placeholder="请选择">
                                        <el-option v-for="item in optionsvalusexone" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div style="margin-right: 10px;">
                                    <span>年龄：</span>
                                    <el-select v-model="formlist.ageGroup" placeholder="请选择">
                                        <el-option v-for="item in optionsvaluageone" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>


                            </div>

                        </el-form-item>
                        <el-form-item label-width="70px">
                            <div style="display: flex; justify-content: space-between;">
                                <div style="display: flex; ">
                                    <div style="margin-right: 10px;">
                                        <span>起始时间：</span>
                                        <el-date-picker v-model="formResult.beginTaskDate" type="date" placeholder="选择日期"
                                            format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions5"
                                            @focus="resetTaskDateone">
                                        </el-date-picker>
                                    </div>
                                    <div>
                                        <span>结束时间：</span>
                                        <el-date-picker v-model="formResult.endTaskDate" type="date"
                                            format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions6" placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </div>
                                <div> <el-button type="primary" icon="el-icon-search" @click="searchonetime">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="resetsearchonetime">重置</el-button>
                                    <el-button @click="searchonetimeExcel" type="warning"
                                        icon="el-icon-download">导出</el-button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="全部用户数据">
                            <div style="display: flex;">
                                <div style="margin-right: 30px;"><span>总时长：{{ onlineTime.minuteOnlineTime }}</span> /分钟
                                </div>
                                <div style="margin-right: 30px;"><span>平均时长：{{ onlineTime.avgOnlineTime }}</span> /天</div>
                                <div style="margin-right: 30px;"><span>总人数：{{ onlineTime.totalPerson }}</span> /人</div>
                            </div>
                        </el-form-item>
                    </el-form>

                    <el-card>
                        <el-table border :data="userOnlineTimeDetailList" style="width: 100%;">
                            <el-table-column label="用户ID" prop="customerId" align="center"></el-table-column>
                            <el-table-column label="用户手机号" prop="phone" align="center"></el-table-column>
                            <el-table-column label="用户在线时长/分" prop="onlineTime" align="center"></el-table-column>
                            <el-table-column label="在线天数" prop="onlineDays" align="center"></el-table-column>
                            <el-table-column label="平均在线时长/天" prop="avgOnlineTime" align="center"></el-table-column>
                            <el-table-column label="性别" prop="sex" align="center"></el-table-column>
                            <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                            <!-- <el-table-column label="状态" prop="status" align="center"></el-table-column> -->
                        </el-table>
                        <div class="blockpagination">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                                :current-page="currentPage" :page-sizes="[20, 40, 60, 80, 100]"
                                layout=" prev, pager, next,->,sizes,total" :total="total">
                            </el-pagination>
                        </div>
                    </el-card>
                </div>
            </el-tab-pane>
            <el-tab-pane label="用户在线时长（状态）">
                <el-form :model="formlist1" style="padding: 0 20px;">
                    <el-form-item label="筛选条件" style="text-align:left;">
                        <div style="display: flex;">
                            <el-input style="width: 260px; margin-right: 10px;" v-model="formlist1.phone"
                                placeholder="根据用户手机号进行搜索" suffix-icon="el-icon-search"></el-input>

                            <div style="margin-right: 10px;">
                                <span>性别：</span>
                                <el-select v-model="formlist1.sex" placeholder="请选择">
                                    <el-option v-for="item in optionsvalusexone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-right: 10px;">
                                <span>年龄：</span>
                                <el-select v-model="formlist1.ageGroup" placeholder="请选择">
                                    <el-option v-for="item in optionsvaluageone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                        </div>

                    </el-form-item>
                    <el-form-item label-width="50px">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="margin-right: 10px;">
                                <span>状态：</span>
                                <el-select v-model="formlist1.status" placeholder="请选择">
                                    <el-option v-for="item in optionsvalustyleone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                            <div>
                                <el-button type="primary" @click="searchonetimestyle">搜索</el-button>
                                <el-button icon="el-icon-refresh" @click="resetonetimestyle">重置</el-button>
                                <el-button @click="onetimestyleExcel" type="warning" icon="el-icon-download">导出</el-button>
                            </div>
                        </div>

                    </el-form-item>
                    <el-form-item label="全部用户数据">
                        <div style="display: flex;">
                            <div style="margin-right: 30px;"><span>总时长：{{ onlineTime.minuteOnlineTime }}</span> /分钟
                            </div>
                            <div style="margin-right: 30px;"><span>平均时长：{{ onlineTime.avgOnlineTime }}</span> /天</div>
                            <div style="margin-right: 30px;"><span>总人数：{{ onlineTime.totalPerson }}</span> /人</div>
                        </div>
                    </el-form-item>

                </el-form>
                <el-card>
                    <el-table border :data="userOnlineTimeDetailList" style="width: 100%;">
                        <el-table-column label="用户ID" prop="customerId" align="center"></el-table-column>
                        <el-table-column label="用户手机号" prop="phone" align="center"></el-table-column>
                        <el-table-column label="用户在线时长/分" prop="onlineTime" align="center"></el-table-column>
                        <el-table-column label="在线天数" prop="onlineDays" align="center"></el-table-column>
                        <el-table-column label="平均在线时长/天" prop="avgOnlineTime" align="center"></el-table-column>
                        <el-table-column label="性别" prop="sex" align="center"></el-table-column>
                        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                        <el-table-column label="状态" prop="status" align="center"></el-table-column>
                    </el-table>
                    <div class="blockpagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                            :current-page="currentPage" :page-sizes="[20, 40, 60, 80, 100]"
                            layout=" prev, pager, next,->,sizes,total" :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="用户在线频次">
                <el-form v-model="formlist2" style="padding: 0 20px;">

                    <el-form-item label="筛选条件" style="text-align:left;">
                        <div style="display: flex;">
                            <el-input style="width: 260px; margin-right: 10px;" v-model="formlist2.phone"
                                placeholder="根据用户手机号进行搜索" suffix-icon="el-icon-search"></el-input>

                            <div style="margin-right: 10px;">
                                <span>性别：</span>
                                <el-select v-model="formlist2.sex" placeholder="请选择">
                                    <el-option v-for="item in optionsvalusexone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-right: 10px;">
                                <span>年龄：</span>
                                <el-select v-model="formlist2.ageGroup" placeholder="请选择">
                                    <el-option v-for="item in optionsvaluageone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>


                        </div>

                    </el-form-item>
                    <el-form-item label-width="70px">
                        <div style="display: flex; justify-content: space-between;">
                            <div style="display: flex; ">
                                <div style="margin-right: 10px;">
                                    <span>起始时间：</span>
                                    <el-date-picker v-model="formResult.beginTaskDate" type="date" placeholder="选择日期"
                                        format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions5"
                                        @focus="resetTaskDateone">
                                    </el-date-picker>
                                </div>
                                <div>
                                    <span>结束时间：</span>
                                    <el-date-picker v-model="formResult.endTaskDate" type="date" format="yyyy 年 MM 月 dd 日"
                                        :picker-options="pickerOptions6" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </div>
                            <div> <el-button type="primary" icon="el-icon-search" @click="searchfrequencyone">搜索</el-button>
                                <el-button icon="el-icon-refresh" @click="resetfrequencyone">重置</el-button>
                                <el-button @click="frequencyoneExcel" type="warning" icon="el-icon-download">导出</el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="全部用户数据">
                        <div>
                            <span style="margin-right: 20px;">总在线频次
                                <!-- <span v-if="! userOnlineFrequency.totalOnlineFrequency">0</span> -->
                                <span>{{ userOnlineFrequency.totalOnlineFrequency }}</span>
                                次</span>
                            <span style="margin-right: 20px;">总用户数<span>{{ userOnlineFrequency.totalPerson }}</span>人</span>
                        </div>
                    </el-form-item>
                </el-form>
                <el-card>
                    <el-table border :data="userOnlineFrequencyDetailList">
                        <el-table-column label="用户ID" prop="customerId" align="center"></el-table-column>
                        <el-table-column label="用户手机号" prop="phone" align="center"></el-table-column>
                        <el-table-column label="用户在线频次" prop="frequency" align="center"></el-table-column>
                        <el-table-column label="性别" prop="sex" align="center"></el-table-column>
                        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                        <!-- <el-table-column label="状态" prop="status" align="center"></el-table-column> -->
                    </el-table>
                    <div class="blockpagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                            :current-page="currentPage" :page-sizes="[20, 40, 60, 80, 100]"
                            layout=" prev, pager, next,->,sizes,total" :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="用户在线频次（状态）">
                <el-form v-model="formlist3" style="padding: 0 20px;">

                    <el-form-item label="筛选条件" style="text-align:left;">
                        <div style="display: flex;">
                            <el-input style="width: 260px; margin-right: 10px;" v-model="formlist3.phone"
                                placeholder="根据用户手机号进行搜索" suffix-icon="el-icon-search"></el-input>

                            <div style="margin-right: 10px;">
                                <span>性别：</span>
                                <el-select v-model="formlist3.sex" placeholder="请选择">
                                    <el-option v-for="item in optionsvalusexone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-right: 10px;">
                                <span>年龄：</span>
                                <el-select v-model="formlist3.ageGroup" placeholder="请选择">
                                    <el-option v-for="item in optionsvaluageone" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>


                        </div>
                        <el-form-item label-width="70px">
                            <div style="display: flex; justify-content: space-between; margin-top: 10px;">
                                <div style="margin-right: 10px;">
                                    <span>状态：</span>
                                    <el-select v-model="formlist3.status" placeholder="请选择">
                                        <el-option v-for="item in optionsvalustyleone" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>

                                <div> <el-button type="primary" @click="searchfrequencyonestyle">搜索</el-button>
                                    <el-button icon="el-icon-refresh" @click="resetfrequencyonestyle">重置</el-button>
                                    <el-button @click="frequencyonestyleExcel" type="warning"
                                        icon="el-icon-download">导出</el-button>
                                </div>
                            </div>
                        </el-form-item>

                    </el-form-item>
                    <el-form-item label="全部用户数据">
                        <div>
                            <span style="margin-right: 20px;">总在线频次 <span>{{ userOnlineFrequency.totalOnlineFrequency
                            }}</span>次</span>
                            <span style="margin-right: 20px;">总用户数<span>{{ userOnlineFrequency.totalPerson }}</span>人</span>
                        </div>
                    </el-form-item>
                </el-form>
                <el-card>
                    <el-table border :data="userOnlineFrequencyDetailList">
                        <el-table-column label="用户ID" prop="customerId" align="center"></el-table-column>
                        <el-table-column label="用户手机号" prop="phone" align="center"></el-table-column>
                        <el-table-column label="用户在线频次" prop="frequency" align="center"></el-table-column>
                        <el-table-column label="性别" prop="sex" align="center"></el-table-column>
                        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                        <el-table-column label="状态" prop="status" align="center"></el-table-column>
                    </el-table>
                    <div class="blockpagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                            :current-page="currentPage" :page-sizes="[20, 40, 60, 80, 100]"
                            layout=" prev, pager, next,->,sizes,total" :total="total">
                        </el-pagination>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { statisticsInstitutionName, UserOnlineTimeDetail, UserOnlineFrequencyDetail, UserOnlineFrequencyStatusDetail, UserOnlineTimeStatusDetail, PayTransformResult, UserOnlineTimeStatus, UserOnlineFrequencyStatus, PayInfo, RemainInfo, TrainInfo, SysBuriedPointList, getdynamicExport, UserOnlineTime, UserOnlineFrequency } from "@/api/customer/statistics";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: 'Statistics',
    components: { Treeselect },
    data() {
        return {
            userOnlineTimeDetailList: [],
            pageindex: 0,
            onlineTime: {},
            visible: false,
            valuestyleone: '',
            formlist1: {},
            formlist2: {},
            formlist3: {},
            pickerOptions5: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            optionsvalusexone: [
                {
                    value: '-1',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '男'
                },
                {
                    value: '1',
                    label: '女'
                },
            ],
            optionsvalustyleone: [
                {
                    value: '5',
                    label: '订单进行中'
                },
                {
                    value: '6',
                    label: '订单已完成'
                },
                {
                    value: '-1',
                    label: '全部'
                },
            ],
            optionsvaluageone: [
                {
                    value: '1',
                    label: '45岁以下'
                },
                {
                    value: '2',
                    label: '45-54'
                },
                {
                    value: '3',
                    label: '55-64'
                },
                {
                    value: '4',
                    label: '65-74'
                },
                {
                    value: '5',
                    label: '75岁以上'
                },
                {
                    value: '-1',
                    label: '全部'
                },
            ],
            valuageone: '',
            valusxexone: '',
            searchone: '',
            tableO: [],
            formResult: {
                beginTaskDate: '',
                endTaskDate: ''
            },
            timeSa: '',
            formlist: {
                startDate: null,
                endDate: null,
                phone: null,
                sex: '',
                ageGroup: ''
            },
            timeEn: '',
            tableT: [],
            tableTr: [],
            tableF: [],
            tableFr: [],
            pickerOptions3: {
                disabledDate: (time) => {
                    if (this.formResult.beginTaskDate) {
                        let date1 = this.formResult.beginTaskDate
                        let date2 = new Date(date1)
                        date2.setDate(date1.getDate() + 30)
                        if (Date.now() < date2.getTime()) {
                            return time.getTime() < this.formResult.beginTaskDate || time.getTime() > (new Date().getTime() - 86400000)
                        } else {
                            return time.getTime() < this.formResult.beginTaskDate || time.getTime() > date2
                        }
                    } else {
                        return time.getTime() > Date.now()
                    }
                }
            },
            pickerOptions6: {
                disabledDate: (time) => {
                    if (this.formResult.beginTaskDate) {
                        let date1 = this.formResult.beginTaskDate
                        let date2 = new Date(date1)
                        date2.setDate(date1.getDate() + 30)
                        if (Date.now() < date2.getTime()) {
                            return time.getTime() < this.formResult.beginTaskDate || time.getTime() > (new Date().getTime() - 86400000)
                        } else {
                            return time.getTime() < this.formResult.beginTaskDate || time.getTime() > date2
                        }
                    } else {
                        return time.getTime() > Date.now()
                    }
                }
            },
            detailPageUserNumber: 0,
            registerPageUserNumber: 0,
            payPageUserNumber: 0,
            paySuccessPageUserNumber: 0,
            tabindex: 0,//第几个表
            currentPage: 1,
            total: 0,
            pagesize: 20,
            value: null, //选择机构名称
            value2: '', //获取中国标准时间
            timeS: '',//获取开始时间
            timeE: '',//获取结束时间
            dateTime1: '',//获取时间戳
            currentTime: '',
            thirtyDaysAgo: '',
            activeName: 'first',//表头的选择
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            }, //获取年月日时分秒 一到五除了第四个的
            options: [],//选择的所有机构名称
            searchinfo: {},//点击搜索的传递的参数
            columnData: [],
            rowData: [],
            userOnlineFrequencyDetailList: [],
            userOnlineFrequency: {},
            currentDate: '',
            thirtyDaysAgo: '',
        }

    },
    methods: {
        //搜索用户在线时长
        searchonetime() {
            if (this.formResult.beginTaskDate) {
                console.log(this.formlist)
                this.formlist.startDate = this.getTimeF(new Date(this.formResult.beginTaskDate))
                this.formlist.endDate = this.getTimeF(new Date(this.formResult.endTaskDate))

            } else {
                this.formlist.startDate = ''
                this.formlist.endDate = ''
                console.log(this.formlist)
            }
            if (!this.formlist.ageGroup) {
                this.formlist.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist.sex) {
                this.formlist.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist.phone) {
                this.formlist.phone = ''
            }
            console.log(this.formlist)
            this.currentPage = 1
            this.pagesize = 20
            let url = `/customer/buried_point/v1/getUserOnlineTimeDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineTimeDetail(url, this.formlist)
            this.getUserOnlineTime(this.formlist)
        },
        //重置用户在线时长
        resetsearchonetime() {
            this.currentPage = 1
            this.pagesize = 20
            this.formResult.beginTaskDate = ''
            this.formResult.endTaskDate = ''
            this.formlist.sex = this.optionsvalusexone[0].value
            this.formlist.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            this.formlist.phone = ''
            this.formlist.startDate = this.thirtyDaysAgo
            this.formlist.endDate = this.currentDate
            console.log(this.formlist)
            this.currentPage = 1
            this.pagesize = 20
            let url = `/customer/buried_point/v1/getUserOnlineTimeDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineTimeDetail(url, this.formlist)
            this.getUserOnlineTime(this.formlist)
        },
        //导出用户在线时长
        searchonetimeExcel() {
            console.log(this.formResult)
            if (this.formResult.beginTaskDate) {
                this.formlist.startDate = this.getTimeF(new Date(this.formResult.beginTaskDate))
                this.formlist.endDate = this.getTimeF(new Date(this.formResult.endTaskDate))
                console.log(this.formlist)
            } else {
                this.formlist.startDate = ''
                this.formlist.endDate = ''
                console.log(this.formlist)
            }
            if (!this.formlist.ageGroup) {
                this.formlist.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist.sex) {
                this.formlist.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist.phone) {
                this.formlist.phone = ''
            }
            console.log(this.formlist)
            this.download('/customer/buried_point/v1/exportUserOnlineTime', {
                ...this.formlist
            }, `list_${new Date().getTime()}.xlsx`)
        },
        //搜索用户在线时长-状态
        searchonetimestyle() {
            this.currentPage = 1
            this.pagesize = 20
            if (!this.formlist1.ageGroup) {
                this.formlist1.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist1.sex) {
                this.formlist1.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist1.phone) {
                this.formlist1.phone = ''
            }
            if (!this.formlist1.status) {
                this.formlist1.status = this.optionsvalustyleone[this.optionsvalustyleone.length - 1].value
            }
            let url = `/customer/buried_point/v1/getUserOnlineTimeStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineTimeStatusDetail(url, this.formlist1)
            this.getUserOnlineTimeStatus(this.formlist1)

            console.log(this.formlist1)
        },
        //重置用户在线时长-状态
        resetonetimestyle() {
            this.currentPage = 1
            this.pagesize = 20
            this.formResult.beginTaskDate = ''
            this.formResult.endTaskDate = ''
            this.formlist1.phone = ''
            this.formlist1.sex = this.optionsvalusexone[0].value
            this.formlist1.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            this.formlist1.status = this.optionsvalustyleone[this.optionsvalustyleone.length - 1].value
            console.log(this.formlist1)
            let url = `/customer/buried_point/v1/getUserOnlineTimeStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineTimeStatusDetail(url, this.formlist1)
            this.getUserOnlineTimeStatus(this.formlist1)
        },
        //导出用户在线时长-状态
        onetimestyleExcel() {
            if (!this.formlist1.ageGroup) {
                this.formlist1.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist1.sex) {
                this.formlist1.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist1.phone) {
                this.formlist1.phone = ''
            }
            if (!this.formlist1.status) {
                this.formlist1.status = this.optionsvalustyleone[this.optionsvalustyleone.length - 1].value
            }
            this.download('/customer/buried_point/v1/exportUserOnlineTimeStatus', {
                ...this.formlist1
            }, `list_${new Date().getTime()}.xlsx`)
        },

        //搜索用户在线频次
        searchfrequencyone() {
            this.currentPage = 1
            this.pagesize = 20
            if (this.formResult.beginTaskDate) {
                console.log(this.formlist2)
                this.formlist2.startDate = this.getTimeF(new Date(this.formResult.beginTaskDate))
                this.formlist2.endDate = this.getTimeF(new Date(this.formResult.endTaskDate))

            } else {
                this.formlist2.startDate = ''
                this.formlist2.endDate = ''
                console.log(this.formlist2)
            }
            if (!this.formlist2.ageGroup) {
                this.formlist2.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist2.sex) {
                this.formlist2.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist2.phone) {
                this.formlist2.phone = ''
            }
            console.log(this.formlist2)
            let url = `/customer/buried_point/v1/getUserOnlineFrequencyDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineFrequency(this.formlist2)
            this.getUserOnlineFrequencyDetail(url, this.formlist2)
        },
        //重置用户在线频次
        resetfrequencyone() {
            this.currentPage = 1
            this.pagesize = 20
            // this.formlist2 = {}
            this.formResult.beginTaskDate = ''
            this.formResult.endTaskDate = ''
            this.formlist2.startDate = this.thirtyDaysAgo
            this.formlist2.endDate = this.currentDate
            this.formlist2.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            this.formlist2.sex = this.optionsvalusexone[0].value
            this.formlist2.phone = ''
            console.log(this.formlist2, 2)
            let url = `/customer/buried_point/v1/getUserOnlineFrequencyDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineFrequency(this.formlist2)
            this.getUserOnlineFrequencyDetail(url, this.formlist2)
        },
        //导出用户在线频次
        frequencyoneExcel() {
            if (this.formResult.beginTaskDate) {

                this.formlist2.startDate = this.getTimeF(new Date(this.formResult.beginTaskDate))
                this.formlist2.endDate = this.getTimeF(new Date(this.formResult.endTaskDate))
                console.log(this.formlist)
            } else {
                this.formlist2.startDate = ''
                this.formlist2.endDate = ''
                console.log(this.formlist2)
            }
            if (!this.formlist2.ageGroup) {
                this.formlist2.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist2.sex) {
                this.formlist2.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist2.phone) {
                this.formlist2.phone = ''
            }
            console.log(this.formlist2)
            this.download('/customer/buried_point/v1/exportUserOnlineFrequency', {
                ...this.formlist2
            }, `list_${new Date().getTime()}.xlsx`)
        },

        //搜索用户在线频次-状态
        searchfrequencyonestyle() {
            this.currentPage = 1
            this.pagesize = 20
            if (!this.formlist3.ageGroup) {
                this.formlist3.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist3.sex) {
                this.formlist3.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist3.phone) {
                this.formlist3.phone = ''
            }
            if (!this.formlist3.status) {
                this.formlist3.status = this.optionsvalustyleone[this.optionsvalustyleone.length - 1].value
            }
            let url = `/customer/buried_point/v1/getUserOnlineFrequencyStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineFrequencyStatus(this.formlist3)
            this.getUserOnlineFrequencyStatusDetail(url, this.formlist3)
            console.log(this.formlist3)
        },
        //重置用户在线频次-状态
        resetfrequencyonestyle() {
            this.currentPage = 1
            this.pagesize = 20
            this.formlist3.phone = ''
            this.formlist3.sex = this.optionsvalusexone[0].value
            this.formlist3.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            this.formlist3.status = this.optionsvalustyleone[this.optionsvalustyleone.length - 1].value
            let url = `/customer/buried_point/v1/getUserOnlineFrequencyStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getUserOnlineFrequencyStatus(this.formlist3)
            this.getUserOnlineFrequencyStatusDetail(url, this.formlist3)
            console.log(this.formlist3)
        },
        //导出用户在线频次-状态
        frequencyonestyleExcel() {

            if (!this.formlist3.ageGroup) {
                this.formlist3.ageGroup = this.optionsvaluageone[this.optionsvaluageone.length - 1].value
            }
            if (!this.formlist3.sex) {
                this.formlist3.sex = this.optionsvalusexone[0].value
            }
            if (!this.formlist3.phone) {
                this.formlist3.phone = ''
            }
            if (!this.formlist3.status) {
                this.formlist3.status = this.optionsvalustyleone[this.optionsvalustyleone.length - 1].value
            }
            console.log(this.formlist3)
            this.download('/customer/buried_point/v1/exportUserOnlineFrequencyStatus', {
                ...this.formlist3
            }, `list_${new Date().getTime()}.xlsx`)
        },
        //导出埋点细节
        goExcel() {
            /** 导出按钮操作 */
            console.log(this.searchinfo)
            console.log({ ...this.searchinfo })
            this.download('/customer/buried_point/v1/export', {
                ...this.searchinfo
            }, `list_${new Date().getTime()}.xlsx`)

            console.log(this.tabindex, 'this.tabindex')
        },
        //导出用户支付转化表
        goExcelPayTransformResult() {
            /** 导出按钮操作 */
            this.searchinfo.orgNo = this.value
            this.searchinfo.startTime = this.timeS
            this.searchinfo.endTime = this.timeE

            console.log(this.searchinfo)
            console.log({ ...this.searchinfo })
            this.download('/customer/buried_point/v1/exportPayTransformResult', {
                ...this.searchinfo
            }, `list_${new Date().getTime()}.xlsx`)
        },
        //导出用户支付习惯统计表
        goExcelPayInfo() {
            /** 导出按钮操作 */
            this.searchinfo.orgNo = this.value
            this.searchinfo.startTime = this.timeS
            this.searchinfo.endTime = this.timeE

            console.log(this.searchinfo)
            console.log({ ...this.searchinfo })
            this.download('/customer/buried_point/v1/exportPayInfo', {
                ...this.searchinfo
            }, `list_${new Date().getTime()}.xlsx`)
        },
        //导出完结用户留存统计表
        goExcelTrainInfo() {
            /** 导出按钮操作 */
            this.searchinfo.orgNo = this.value
            this.searchinfo.startTime = this.timeS
            this.searchinfo.endTime = this.timeE

            console.log(this.searchinfo)
            console.log({ ...this.searchinfo })
            this.download('/customer/buried_point/v1/exportTrainInfo', {
                ...this.searchinfo
            }, `list_${new Date().getTime()}.xlsx`)
        },
        //导出用户量留存统计
        goExcelRemainInfo() {
            console.log(this.searchinfo)
            /** 导出按钮操作 */
            // this.searchinfo.orgNo = null
            if (this.formResult.beginTaskDate) {
                let a = this.getTimeF(new Date(this.formResult.beginTaskDate))
                let b = this.getTimeF(new Date(this.formResult.endTaskDate))
                this.searchinfo.startTime = a
                this.searchinfo.endTime = b
                getdynamicExport(this.searchinfo).then(res => {
                    //获取文件名
                    const fileName = '动态数据表格.xls'
                    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
                    console.log(blob)
                    //创建一个a标签并设置href属性，之后模拟人为点击下载文件
                    let link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = fileName;//设置下载文件名
                    link.click();//模拟点击
                    //释放资源并删除创建的a标签
                    URL.revokeObjectURL(link.href);
                    // document.body.removeChild(link)
                })

            } else {
                // 获取当前时间
                const now = new Date();
                const currentYear = now.getFullYear();
                const currentMonth = now.getMonth() + 1;
                const currentDay = now.getDate();
                const formattedCurrentMonth = currentMonth < 10 ? `0${currentMonth}` : currentMonth;
                const formattedCurrentDay = currentDay <= 10 ? `0${currentDay - 1}` : currentDay - 1;
                this.currentDate = `${currentYear}-${formattedCurrentMonth}-${formattedCurrentDay}`;
                console.log(this.currentDate, '获取当天前一天时间')

                // 获取30天前的日期
                // 获取30天前的日期
                const thirtyDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30);
                const thirtyDaysAgoYear = thirtyDaysAgo.getFullYear();
                const thirtyDaysAgoMonth = thirtyDaysAgo.getMonth() + 1;
                const thirtyDaysAgoDay = thirtyDaysAgo.getDate();
                const formattedThirtyDaysAgoMonth = thirtyDaysAgoMonth < 10 ? `0${thirtyDaysAgoMonth}` : thirtyDaysAgoMonth;
                const formattedThirtyDaysAgoDay = thirtyDaysAgoDay < 10 ? `0${thirtyDaysAgoDay}` : thirtyDaysAgoDay;
                this.thirtyDaysAgo = `${thirtyDaysAgoYear}-${formattedThirtyDaysAgoMonth}-${formattedThirtyDaysAgoDay}`;
                //RemainInfo
                this.searchinfo = {
                    // orgNo:null,
                    startTime: this.thirtyDaysAgo,
                    endTime: this.currentDate
                }
                getdynamicExport(this.searchinfo).then(res => {
                    //获取文件名

                    const fileName = '动态数据表格.xls'
                    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })


                    console.log(blob)
                    //创建一个a标签并设置href属性，之后模拟人为点击下载文件
                    let link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = fileName;//设置下载文件名
                    link.click();//模拟点击
                    //释放资源并删除创建的a标签
                    URL.revokeObjectURL(link.href);
                    // document.body.removeChild(link)
                })
            }
        },
        // 任务起期获取焦点时触发
        resetTaskDate() {
            // 清空任务止期
            this.formResult.endTaskDate = ''
        },
        resetTaskDateone() {
            this.formlist.endTaskDate = ''
        },
        //每页几条数据
        handleSizeChange(val) {
            this.currentPage = 1
            this.pagesize = val
            console.log(`当前页: ${this.currentPage}`);
            console.log(`每页 ${this.pagesize} 条`);
            if (this.pageindex == 4) {
                let url = `/customer/buried_point/v1/getSysBuriedPointList?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getSysBuriedPointList(url, JSON.stringify(this.searchinfo))
            } else if (this.pageindex == 5) {
                let url = `/customer/buried_point/v1/getUserOnlineTimeDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineTime(this.formlist)
                this.getUserOnlineTimeDetail(url, this.formlist)
            } else if (this.pageindex == 6) {
                let url = `/customer/buried_point/v1/getUserOnlineTimeStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineTimeStatus(this.formlist1)
                this.getUserOnlineTimeStatusDetail(url, this.formlist1)
            } else if (this.pageindex == 7) {
                this.getUserOnlineFrequency(this.formlist2)
                let url = `/customer/buried_point/v1/getUserOnlineFrequencyDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineFrequencyDetail(url, this.formlist2)
            } else if (this.pageindex == 8) {
                let url = `/customer/buried_point/v1/getUserOnlineFrequencyStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineFrequencyStatus(this.formlist3)
                this.getUserOnlineFrequencyStatusDetail(url, this.formlist3)
            }
        },
        //当前第几页
        handleCurrentChange(val) {
            this.currentPage = val
            if (this.pageindex == 4) {
                console.log(`当前页: ${val}`);
                let url = `/customer/buried_point/v1/getSysBuriedPointList?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getSysBuriedPointList(url, JSON.stringify(this.searchinfo))
            } else if (this.pageindex == 5) {
                let url = `/customer/buried_point/v1/getUserOnlineTimeDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineTime(this.formlist)
                this.getUserOnlineTimeDetail(url, this.formlist)
            } else if (this.pageindex == 6) {
                let url = `/customer/buried_point/v1/getUserOnlineTimeStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineTimeStatus(this.formlist1)
                this.getUserOnlineTimeStatusDetail(url, this.formlist1)
            } else if (this.pageindex == 7) {
                this.getUserOnlineFrequency(this.formlist2)
                let url = `/customer/buried_point/v1/getUserOnlineFrequencyDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineFrequencyDetail(url, this.formlist2)
            } else if (this.pageindex == 8) {
                this.getUserOnlineFrequencyStatus(this.formlist3)
                let url = `/customer/buried_point/v1/getUserOnlineFrequencyStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineFrequencyStatusDetail(url, this.formlist3)
            }

        },
        //获取所有选择机构名称
        InstitutionName() {
            statisticsInstitutionName().then(res => {
                console.log(res)
                this.options = res.data
            })
        },
        //点击搜索的事件
        search() {
            this.currentPage = 1
            this.pagesize = 20
            console.log(this.formResult)
            if (this.value) {
                this.searchinfo.orgNo = this.value
                this.searchinfo.startTime = this.timeS
                this.searchinfo.endTime = this.timeE
                let data = JSON.stringify(this.searchinfo)
                console.log(data, 'JSon')
                if (this.tabindex == 0) {
                    console.log(this.tabindex)
                    this.getPayTransformResult(data)
                } else if (this.tabindex == 1) {
                    this.getPayInfo(data)
                } else if (this.tabindex == 2) {
                    this.getTrainInfo(data)
                } else if (this.tabindex == 3) {
                    this.searchinfo.orgNo = null
                    let a = this.getTimeF(new Date(this.formResult.beginTaskDate))
                    let b = this.getTimeF(new Date(this.formResult.endTaskDate))
                    this.searchinfo.startTime = a
                    this.searchinfo.endTime = b
                    let data = JSON.stringify(this.searchinfo)
                    this.getRemainInfo(data)
                    console.log(this.tabindex)
                } else if (this.tabindex == 4) {
                    console.log(this.tabindex)
                    console.log(this.currentPage, this.pagesize, 'this.currentPage, this.pagesize')
                    let url = `/customer/buried_point/v1/getSysBuriedPointList?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                    this.getSysBuriedPointList(url, data)
                }
            } else {
                this.value = null
                console.log(this.value, this.timeS, this.timeE)
                this.searchinfo.orgNo = this.value
                this.searchinfo.startTime = this.timeS
                this.searchinfo.endTime = this.timeE
                console.log(this.searchinfo)
                let data = JSON.stringify(this.searchinfo)
                if (this.tabindex == 0) {
                    this.getPayTransformResult(data)
                } else if (this.tabindex == 1) {
                    this.getPayInfo(data)
                } else if (this.tabindex == 2) {
                    // this.getRemainInfo(data)
                    this.getTrainInfo(data)
                } else if (this.tabindex == 3) {
                    this.searchinfo.orgNo = null
                    let a = this.getTimeF(new Date(this.formResult.beginTaskDate))
                    let b = this.getTimeF(new Date(this.formResult.endTaskDate))
                    this.searchinfo.startTime = a
                    this.searchinfo.endTime = b
                    let data = JSON.stringify(this.searchinfo)
                    this.getRemainInfo(data)
                } else if (this.tabindex == 4) {
                    let url = `/customer/buried_point/v1/getSysBuriedPointList?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                    this.getSysBuriedPointList(url, data)
                }
            }

        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.label,
                children: node.children
            };
        },
        //表头切换的事件
        handleClick(tab, event) {
            this.pageindex = tab.index
            this.currentPage = 1
            this.total = 0
            this.pagesize = 20
            this.formlist2 = {}
            this.formlist1 = {}
            this.formlist3 = {}
            this.formlist = {}
            this.value2 = ''
            this.value = null
            this.formResult.beginTaskDate = ''
            this.formResult.endTaskDate = ''
            this.tabindex = tab.index
            if (tab.index == 1) {
                this.searchinfo = {
                    orgNo: "",
                    startTime: "",
                    endTime: ""
                }
                this.getPayInfo(JSON.stringify(this.searchinfo))
            } else if (tab.index == 2) {
                this.searchinfo = {
                    orgNo: "",
                    startTime: "",
                    endTime: ""
                }
                this.getTrainInfo(JSON.stringify(this.searchinfo))
            } else if (tab.index == 3) {
                this.searchinfo = {
                    startTime: this.thirtyDaysAgo,
                    endTime: this.currentDate
                }
                this.getRemainInfo(JSON.stringify(this.searchinfo))
            } else if (tab.index == 4) {
                this.searchinfo = {
                    orgNo: "",
                    startTime: "",
                    endTime: ""
                }
                let url = `/customer/buried_point/v1/getSysBuriedPointList?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getSysBuriedPointList(url, JSON.stringify(this.searchinfo))
            } else if (tab.index == 0) {
                this.searchinfo = {
                    orgNo: "",
                    startTime: "",
                    endTime: ""
                }
                this.getPayTransformResult(JSON.stringify(this.searchinfo))
            } else if (tab.index == 5) {
                let obj = {}
                obj.startDate = this.thirtyDaysAgo
                obj.endDate = this.currentDate
                obj.ageGroup = '-1'
                obj.sex = '-1'
                obj.phone = null
                console.log(this.formlist)
                this.formlist = obj
                this.getUserOnlineTime(obj)
                let url = `/customer/buried_point/v1/getUserOnlineTimeDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineTimeDetail(url, obj)
            } else if (tab.index == 6) {
                let obj = {}
                obj.ageGroup = '-1'
                obj.sex = '-1'
                obj.phone = null
                obj.status = '-1'
                console.log(this.formlist1)
                this.formlist1 = obj
                this.getUserOnlineTimeStatus(obj)
                let url = `/customer/buried_point/v1/getUserOnlineTimeStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineTimeStatusDetail(url, obj)
                console.log(tab.index, event);
            } else if (tab.index == 7) {
                let obj = {}
                obj.startDate = this.thirtyDaysAgo
                obj.endDate = this.currentDate
                obj.ageGroup = '-1'
                obj.sex = '-1'
                obj.phone = null
                this.formlist2 = obj
                this.getUserOnlineFrequency(obj)
                let url = `/customer/buried_point/v1/getUserOnlineFrequencyDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineFrequencyDetail(url, obj)
            } else if (tab.index == 8) {
                let obj = {}
                obj.ageGroup = '-1'
                obj.sex = '-1'
                obj.status = '-1'
                obj.phone = null
                this.formlist3 = obj
                this.getUserOnlineFrequencyStatus(obj)
                let url = `/customer/buried_point/v1/getUserOnlineFrequencyStatusDetail?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
                this.getUserOnlineFrequencyStatusDetail(url, obj)
            }
        },
        //用户支付转化表
        getPayTransformResult(data) {
            PayTransformResult(data).then(res => {
                console.log(res)
                this.tableO = res.data

            })
        },
        //重置用户支付转化表
        resetPayTransformResult() {
            this.searchinfo = {
                orgNo: "",
                startTime: "",
                endTime: ""
            }
            this.getPayTransformResult(JSON.stringify(this.searchinfo))
            this.value = null
            this.value2 = ''
            this.timeS = ''
            this.timeE = ''
            this.formResult.endTaskDate = ''
            this.formResult.beginTaskDate = ''
        },
        //用户支付习惯统计表
        getPayInfo(data) {
            PayInfo(data).then(res => {
                console.log(res)
                this.tableT = res.data
            })
        },
        //重置用户支付习惯统计表
        resetPayInfo() {
            this.searchinfo = {
                orgNo: "",
                startTime: "",
                endTime: ""
            }
            PayInfo(JSON.stringify(this.searchinfo)).then(res => {
                console.log(res)
                this.tableT = res.data
            })
            this.value = null
            this.value2 = ''
            this.timeS = ''
            this.timeE = ''
            this.formResult.endTaskDate = ''
            this.formResult.beginTaskDate = ''
        },
        //用户量留存统计
        getRemainInfo(data) {
            RemainInfo(data).then(res => {
                console.log(res)
                this.detailPageUserNumber = res.data.detailPageUserNumber
                this.registerPageUserNumber = res.data.registerPageUserNumber
                this.payPageUserNumber = res.data.payPageUserNumber
                this.paySuccessPageUserNumber = res.data.paySuccessPageUserNumber
                this.tableF = res.data.remainTable
                console.log(this.tableF)
                this.rowData = res.data.remainTable.rowData
                this.columnData = res.data.remainTable.columnData
            })
        },
        //重置用户量留存统计
        resetRemainInfo() {
            this.searchinfo = {
                orgNo: "",
                startTime: "",
                endTime: ""
            }
            TrainInfo(JSON.stringify(this.searchinfo)).then(res => {
                console.log(res)
                this.tableTr = res.data
            })
            this.value = null
            this.value2 = ''
            this.timeS = ''
            this.timeE = ''
            this.formResult.endTaskDate = ''
            this.formResult.beginTaskDate = ''
        },
        //完结用户留存统计表
        getTrainInfo(data) {
            TrainInfo(data).then(res => {
                console.log(res)
                this.tableTr = res.data
            })
        },
        //重置完结用户留存统计表
        resetTrainInfo() {
            // 获取当前时间
            const now = new Date();
            const currentYear = now.getFullYear();
            const currentMonth = now.getMonth() + 1;
            const currentDay = now.getDate();
            const formattedCurrentMonth = currentMonth < 10 ? `0${currentMonth}` : currentMonth;
            const formattedCurrentDay = currentDay <= 10 ? `0${currentDay - 1}` : currentDay - 1;
            this.currentDate = `${currentYear}-${formattedCurrentMonth}-${formattedCurrentDay}`;
            console.log(this.currentDate, '获取当天前一天时间')
            // 获取30天前的日期
            // 获取30天前的日期
            const thirtyDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30);
            const thirtyDaysAgoYear = thirtyDaysAgo.getFullYear();
            const thirtyDaysAgoMonth = thirtyDaysAgo.getMonth() + 1;
            const thirtyDaysAgoDay = thirtyDaysAgo.getDate();
            const formattedThirtyDaysAgoMonth = thirtyDaysAgoMonth < 10 ? `0${thirtyDaysAgoMonth}` : thirtyDaysAgoMonth;
            const formattedThirtyDaysAgoDay = thirtyDaysAgoDay < 10 ? `0${thirtyDaysAgoDay}` : thirtyDaysAgoDay;
            this.thirtyDaysAgo = `${thirtyDaysAgoYear}-${formattedThirtyDaysAgoMonth}-${formattedThirtyDaysAgoDay}`;
            //RemainInfo
            this.searchinfo = {
                // orgNo:null,
                startTime: this.thirtyDaysAgo,
                endTime: this.currentDate
            }
            RemainInfo(JSON.stringify(this.searchinfo)).then(res => {
                console.log(res)
                this.detailPageUserNumber = res.data.detailPageUserNumber
                this.registerPageUserNumber = res.data.registerPageUserNumber
                this.payPageUserNumber = res.data.payPageUserNumber
                this.paySuccessPageUserNumber = res.data.paySuccessPageUserNumber
                this.tableF = res.data.remainTable
                console.log(this.tableF)
                this.rowData = res.data.remainTable.rowData
                this.columnData = res.data.remainTable.columnData
            })
            this.value = null
            this.value2 = ''
            this.timeS = ''
            this.timeE = ''
            this.formResult.endTaskDate = ''
            this.formResult.beginTaskDate = ''
        },
        //页面各细节埋点
        getSysBuriedPointList(page, pagesize, data) {
            console.log(page, pagesize)

            SysBuriedPointList(page, pagesize, data).then(res => {
                console.log(res)
                this.tableFr = res.rows
                console.log(this.tableFr)
                this.total = res.total
            })
        },
        //重置埋点细节
        resetSysBuriedPointList() {
            this.currentPage = 1
            this.pagesize = 20
            this.searchinfo = {
                orgNo: "",
                startTime: "",
                endTime: ""
            }
            let url = `/customer/buried_point/v1/getSysBuriedPointList?pageNum=${this.currentPage}&pageSize=${this.pagesize}`
            this.getSysBuriedPointList(url, JSON.stringify(this.searchinfo))
            this.value = null
            this.value2 = ''
            this.timeS = ''
            this.timeE = ''
            this.formResult.endTaskDate = ''
            this.formResult.beginTaskDate = ''
        },
        //获取年月日 
        getTimeF(b) {
            // 年
            let y = b.getFullYear()
            // 月
            let m = b.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            // 日
            let d = b.getDate()
            d = d < 10 ? ('0' + d) : d
            return this.dateTime1 = y + '-' + m + '-' + d;
        },
        //获取年月日 
        changtimefour() {
            if (this.value2) {
                console.log(this.value2)
                let b = this.value2[0]
                let a = this.value2[1]
                this.timeS = this.getTimeF(b)
                this.timeE = this.getTimeF(a)
                console.log('this.timeS', this.timeS, this.timeE)
            }
        },
        //获取用户在线时长
        getUserOnlineTime(data) {
            UserOnlineTime(data).then(res => {
                console.log(res)
                // this.userOnlineTimeDetailList = res.data.userOnlineTimeDetailList
                this.onlineTime = res.data
            })
        },
        //获取用户在线时长
        getUserOnlineTimeDetail(url, data) {
            UserOnlineTimeDetail(url, data).then(res => {
                console.log(res)
                this.userOnlineTimeDetailList = res.rows
                this.total = res.total
            })
        },
        //获取用户在线时长(状态)
        getUserOnlineTimeStatus(data) {
            UserOnlineTimeStatus(data).then(res => {
                // this.userOnlineTimeDetailList = res.data.userOnlineTimeDetailList
                this.onlineTime = res.data
                console.log(res.data)
            })
        },
        //获取用户在线时长(状态)
        getUserOnlineTimeStatusDetail(url, data) {
            UserOnlineTimeStatusDetail(url, data).then(res => {
                this.userOnlineTimeDetailList = res.rows
                this.total = res.total
            })
        },
        //获取用户在线频次
        getUserOnlineFrequency(data) {
            UserOnlineFrequency(data).then(res => {
                this.userOnlineFrequency = res.data
                // this.userOnlineFrequencyDetailList = res.data.userOnlineFrequencyDetailList
            })
        },
        //获取用户在线频次
        getUserOnlineFrequencyDetail(url, data) {
            UserOnlineFrequencyDetail(url, data).then(res => {
                this.userOnlineFrequencyDetailList = res.rows
                this.total = res.total
            })
        },
        //获取用户在线频次(状态)
        getUserOnlineFrequencyStatusDetail(url, data) {
            UserOnlineFrequencyStatusDetail(url, data).then(res => {
                this.userOnlineFrequencyDetailList = res.rows
                this.total = res.total
            })
        },
        //获取用户在线频次(状态)
        getUserOnlineFrequencyStatus(data) {
            UserOnlineFrequencyStatus(data).then(res => {
                this.userOnlineFrequency = res.data
                // this.userOnlineFrequencyDetailList = res.data.userOnlineFrequencyDetailList
                console.log(res)
            })
        },
    },
    computed: {
        //搜索按钮的判断
        isDisabled() {
            return !this.value && !this.value2
        },
        isDisabled1() {
            return !this.formResult.beginTaskDate && !this.formResult.beginTaskDate
        },
        isshoe() {

            console.log(this.formlist.beginTaskDate, 'formlist.beginTaskDate==================')
        }
    },
    mounted() {
        // 获取当前时间
        const now = new Date();
        const currentYear = now.getFullYear();
        const currentMonth = now.getMonth() + 1;
        const currentDay = now.getDate();
        const formattedCurrentMonth = currentMonth < 10 ? `0${currentMonth}` : currentMonth;
        const formattedCurrentDay = currentDay <= 10 ? `0${currentDay - 1}` : currentDay - 1;
        this.currentDate = `${currentYear}-${formattedCurrentMonth}-${formattedCurrentDay}`;
        console.log(this.currentDate, '获取当天前一天时间')

        // 获取30天前的日期
        // 获取30天前的日期
        const thirtyDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30);
        const thirtyDaysAgoYear = thirtyDaysAgo.getFullYear();
        const thirtyDaysAgoMonth = thirtyDaysAgo.getMonth() + 1;
        const thirtyDaysAgoDay = thirtyDaysAgo.getDate();
        const formattedThirtyDaysAgoMonth = thirtyDaysAgoMonth < 10 ? `0${thirtyDaysAgoMonth}` : thirtyDaysAgoMonth;
        const formattedThirtyDaysAgoDay = thirtyDaysAgoDay < 10 ? `0${thirtyDaysAgoDay}` : thirtyDaysAgoDay;
        this.thirtyDaysAgo = `${thirtyDaysAgoYear}-${formattedThirtyDaysAgoMonth}-${formattedThirtyDaysAgoDay}`;
        console.log(this.currentPage, this.pagesize, 'this.currentPage, this.pagesize')

        this.InstitutionName()
        this.searchinfo = {
            orgNo: "",
            startTime: "",
            endTime: ""
        }
        this.getPayTransformResult(JSON.stringify(this.searchinfo))
        // console.log(this.pickerOptions1, this.value2, '===========')
        // PayTransformResult(JSON.stringify(this.searchinfo)).then(res => {
        //         console.log(res)
        //     })

        // console.log(this.currentDate, this.thirtyDaysAgo, '=================================== this.thirtyDaysAgo')
    }
}
</script>
<style scoped rel="stylesheet/scss" lang="scss" >
.box {
    width: 100%;
    height: calc(100vh - 84px);
}

.boxitem {
    width: 100%;
    height: calc(100vh - 84px);
}

.itemlistino {
    width: 100%;
    height: calc(100vh - 84px);
    padding: 0 20px;
}

.itemlistino1 {
    width: 100%;
    // height: calc(100vh - 84px);
    padding: 0 20px;
}

.itemlistino {
    width: 100%;
    // height: calc(100vh - 84px);
    padding: 0 20px;
}

.gaugeoutfit {
    width: 100%;
    position: relative;
    z-index: 9999;
}

.selectist {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    vertical-align: middle;
    font-size: 18px;
    margin-bottom: 10px;

}

.treeselectitem {
    display: inline-block;
    width: 300px;
}

.listitem {
    margin-right: 10px;
}

.selecitem {
    width: 240px;
    height: 36px;
    margin-right: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.choosetime {
    width: 100%;
    height: 37px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.choosetime1 {
    width: 100%;
    // height: 120px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}

.stytiem {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    justify-content: space-between;

    .timesty {
        display: flex;
        z-index: 10;
    }

    div {
        margin-right: 10px;
    }
}

.spanitem {
    margin-bottom: 10px;
    display: flex;

    div {
        width: 170px;
    }
}

.choosetime4 {
    width: 50%;

}

.tabinfo {
    width: 50%;
    display: flex;
}

.tabinfo {
    display: flex;
    flex-direction: column;
}

.blockpagination {
    margin-top: 10px;
}
</style>